<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- <el-col :span="4" :xs="24">
        <treeIndex :deptOptions="deptOptions" @handleNode="handleNodeClick" :title="'部门信息'"></treeIndex>
      </el-col> -->
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" v-if="!isMyScoreStatistics" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px">
          <!-- <el-form-item label="专业" prop="specialityId">
            <el-select v-model="queryParams.specialityId" placeholder="专业" clearable>
              <el-option v-for="dict in dict.type.sys_notice_type" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item> -->

          <el-form-item label="所在院部：">
            <el-select v-model="queryParams.deptId" placeholder="请选择" clearable class="elSelect" @change="handleChange" style="width: 100%">
                <el-option v-for="item in deptOptions" :key="item.deptId" :label="item.deptName"
                :value="item.deptId"></el-option>
            </el-select>
            <!-- <el-cascader v-model="queryParams.deptId" :options="deptOptions" style="width: 200px"
              :props="{ value: 'id', currentLabels: 'label', checkStrictly: true }" @change="handleChange"></el-cascader> -->
          </el-form-item>
          <el-form-item label="所选专业：">
            <el-select v-model="queryParams.specialityId" clearable placeholder="请选择" style="width: 200px">
              <el-option v-for="item in profession" :key="item.VALUE" :label="item.TITILE"
                :value="item.VALUE"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所在年级：">
            <el-select v-model="queryParams.gradeId" clearable placeholder="请选择" style="width: 200px">
              <el-option v-for="item in gradeDate" :key="item.VALUE" :label="item.TITILE" :value="item.VALUE"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="班级：" prop="classId">
            <el-input v-model="queryParams.className" placeholder="请输入班级信息" clearable />
          </el-form-item>

          <el-form-item label="学生姓名：" prop="studentName">
            <el-input v-model="queryParams.studentName" placeholder="请输入学生姓名" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>

          <el-form-item label="测评结果：" v-if="!isTeacherPage && !isMyScoreStatistics">
            <el-select v-model="queryParams.avgType" clearable placeholder="请选择" style="width: 200px">
              <el-option label="合格" value="1"></el-option>
              <el-option label="不合格" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-button type="warning" plain icon="el-icon-download" v-hasPermi="[scoreStatisticsExportBtn]" size="mini" @click="handleExport">导出</el-button>
          <el-button icon="el-icon-plus" v-if="isTeacherPage" type="primary" v-hasPermi="[scoreStatisticsAddBtn]" @click="handleAddOrUpdate()">添加</el-button>
          <right-toolbar :showSearch.sync="showSearch" v-if="!isMyScoreStatistics" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table ref="tableRef" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="学生姓名" align="center" prop="studentName" :show-overflow-tooltip="true" />
          <el-table-column label="注册号" align="center" prop="registerCode" :show-overflow-tooltip="true" />
          <el-table-column label="院系" align="center" prop="college" :show-overflow-tooltip="true" />
          <el-table-column label="专业名" align="center" prop="specialityName" :show-overflow-tooltip="true" />
          <el-table-column label="班级名称" align="center" prop="className" :show-overflow-tooltip="true" />
          <el-table-column label="年级名" align="center" prop="gradeName" :show-overflow-tooltip="true" />
          <el-table-column label="学年" v-if="isTeacherPage || isMyScoreStatistics" align="center" prop="schoolYear" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="termName" v-if="isTeacherPage || isMyScoreStatistics" label="学期" align="center">
            <template slot-scope="scope">
              <span style="display: flex;justify-content: center;"><dict-tag :options="dict.type.basic_term_type" :value="scope.row.termName"></dict-tag></span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="学期" align="center" prop="termName" :show-overflow-tooltip="true" /> -->
          <el-table-column label="辅导员姓名" v-if="isTeacherPage || isMyScoreStatistics" align="center" prop="counsellorName" :show-overflow-tooltip="true" />
          <el-table-column label="平均分" v-if="!isTeacherPage && !isMyScoreStatistics" align="center" prop="avgNum" :show-overflow-tooltip="true" />
          <el-table-column label="总分" align="center" prop="totalScore" :show-overflow-tooltip="true" />
          <el-table-column label="创建者" v-if="isTeacherPage || isMyScoreStatistics" align="center" prop="createName" width="100" />
          <el-table-column label="创建时间" v-if="isTeacherPage || isMyScoreStatistics" align="center" prop="createTime" width="120">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <!-- <el-button size="mini" type="text" @click="handleUpdate(scope.row)">修改</el-button> -->
              <el-button size="mini" type="text" @click="showDetail(scope.row, isTeacherPage || isMyScoreStatistics ? 'row' : 'double')">明细</el-button>
              <el-button size="mini" type="text" v-if="isTeacherPage" v-hasPermi="[scoreStatisticsDelBtn]" @click="delInfo(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </el-col>
    </el-row>
    <add-or-edit v-if="addOrUpdateVisiable" ref="addOrUpdate" @refreshDataList="onReset">
    </add-or-edit>

    <detail v-if="detailShow" ref="detailShow"> </detail>
  </div>
</template>
<script>
import {
  scoreStatisticsList,
  scoreStatisticsTeacherList,
  evaluateDetail,
  delInfo
} from "@/api/assessmentCenter/evaluationIndex";
// import treeIndex from "@/components/tree/index.vue";
import AddOrEdit from "./addoredit.vue"
import detail from "./detail.vue"
import { deptTreeSelect } from "@/api/system/user";
import { getSpecialityByDeptId } from "@/api/information/unitMajor";
import { getGradeSelect } from "@/api/information/gradeInfor";
import {
  collegeSelect
} from "@/api/information/studentInfor"
import { mapGetters } from 'vuex'
export default {
  name: 'scoreStatistics',
  components: {
    // treeIndex,
    AddOrEdit,
    detail
  },
  dicts: [
    "basic_term_type"
  ],
  data() {
    return {
      deptOptions: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 遮罩层
      loading: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        college: '',
        studentName: '',
        avgType: '',
        specialityId: null,
        deptId: null,
        gradeId: null,
      },
      total: 0,
      showSearch: true,
      tableData: [],
      addOrUpdateVisiable: false,
      detailShow: false,
      deptOptions: [],
      profession: [],
      gradeDate: [],
      form:{},
      isMyScoreStatistics: false
    };
  },
  watch: {
    "$route": {
      immediate: true,
      handler(val) {
        this.isMyScoreStatistics = val.query.type && val.query.type == "myScoreStatistics"
      }
    }
  },
  computed: {
    ...mapGetters({
      registerCode: 'name'
    }),
    isTeacherPage() {
      return this.$route.path.endsWith("teacher")
    },
    scoreStatisticsDelBtn() {
      if (this.isMyScoreStatistics) {
        return 'synthesize:myScoreStatistics:del'
      } else if (this.isTeacherPage) {
        return 'synthesize:scoreStatisticsTeacher:del'
      } else {
        return 'synthesize:scoreStatistics:del'
      }
    },
    scoreStatisticsExportBtn() {
      if (this.isMyScoreStatistics) {
        return 'synthesize:myScoreStatistics:export'
      } else if (this.isTeacherPage) {
        return 'synthesize:scoreStatisticsTeacher:export'
      } else {
        return 'synthesize:scoreStatistics:export'
      }
    },
    scoreStatisticsAddBtn() {
      if (this.isTeacherPage) {
        return 'synthesize:scoreStatisticsTeacher:add'
      } else {
        return 'synthesize:scoreStatistics:add'
      }
    }
  },
  created() {
    this.getList();
    this.department();
    this.getGradeInfor()
  },
  methods: {
    showDetail(data, type) {
      this.detailShow = true;
      this.$nextTick(() => {
        console.log(data,'data')
        this.$refs.detailShow.init(data,type)
      });
    },
    // 导出

    handleExport() {
      console.log(this.$refs.tableRef.selection)
      const tableSelectionData = this.$refs.tableRef.selection
      if (!(tableSelectionData && tableSelectionData.length > 0)) {
        this.$message({
          type: 'warning',
          message: '请选择要导出的数据!'
        });
        return
      }
      
      this.download(
        "/evaluate/info/downloadStudentEvaluateScoreDetail",
        {
          evaluateIds: tableSelectionData.map((item)=>{ return item.evaluateId}).join(",")
        },
        `测评信息_${new Date().getFullYear()}-${new Date().getMonth() +
        1}-${new Date().getDate()}.xlsx`
      );
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.noticeId)
    },
    /** 查询列表 */
    getList() {
      let _queryParams = {}
      if (this.isMyScoreStatistics) {
        _queryParams.registerCode = this.registerCode
      }
      _queryParams = {
        ..._queryParams,
        ...this.queryParams
      }
      if (this.isTeacherPage) {
        scoreStatisticsTeacherList(_queryParams).then(response => {
          this.tableData = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      } else {
        scoreStatisticsList(_queryParams).then(response => {
          this.tableData = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.reset();
      this.handleQuery();
    },

    delInfo(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delInfo(row.evaluateId).then(res => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
          this.resetQuery();
        })

      }).catch(() => {

      });
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        college: '',
        specialityId: '',
        gradeId: '',
        studentName: '',
        avgType: ''
      };
    },
    handleNodeClick(data) {
      this.queryParams.college = data.label
      this.handleQuery()
    },

    // 新增、修改弹窗
    handleAddOrUpdate(data) {
      /* */
      this.addOrUpdateVisiable = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(data);
      });
    },

    // 重置
    onReset(data) {
      this.queryParams.pageNum = 1;
      // const arr = Object.assign(this.queryForm, data);
      Object.assign(this.queryParams, this.$options.data().queryParams);
      // this.addOrUpdateVisiable = false
      this.getList();
    },



    // 获取部门信息
    async department() {
      await collegeSelect().then(res => {
        this.deptOptions = res.data;
      });
    },

    // 下拉树选择
    handleChange(value) {
      if (typeof value == "object") {
        this.form.deptId = value[value.length - 1];
        this.queryParams.deptId = value[value.length - 1];
        this.getSpeciality();
      } else if (typeof value == "number") {
        this.form.deptId = value;
        this.getSpeciality();
      } else if (value == undefined) {
        this.form.specialityId = "";
      }
    },

    // 查找专业
    getSpeciality() {
      if (this.form.deptId) {
        getSpecialityByDeptId({ deptId: this.form.deptId }).then(res => {
          if (res.code == "200") {
            this.profession = res.data;
          } else {
            console.log("123");
            this.profession = [];
          }
        });
      } else {
        this.profession = [];
      }
    },


    // 查询所在年级
    getGradeInfor() {
      getGradeSelect().then(response => {
        // console.log(response, "Student");
        this.gradeDate = response.data;
      });
    },


  }
};
</script>
<style scoped lang="scss">
.head-container {
  overflow-x: scroll;
}
</style>